<template>
  <div id="home">
    <!-- 轮播图区域 -->
   <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>

    <!-- 六宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9" >
      <li class="mui-table-view-cell mui-media mui-col-xs-4">
       <router-link to="/home/Newlist">
         <img src="../assets/images/menu1.png" alt="">
          <div class="mui-media-body">新闻资讯</div>
       </router-link>

      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4">
        <router-link to="/home/photolist">
          <img src="../assets/images/menu2.png" alt="">
   
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4">
        <router-link to="/home/Goodslist">
         <img src="../assets/images/menu3.png" alt="">
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4">
        <a href="#">
         <img src="../assets/images/menu4.png" alt="">
          <div class="mui-media-body">留言反馈</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4">
        <a href="#">
         <img src="../assets/images/menu5.png" alt="">
          <div class="mui-media-body">视频专区</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4">
        <a href="#">
          <img src="../assets/images/menu6.png" alt="">
          <div class="mui-media-body">练习我们</div>
        </a>
      </li>
     
    </ul>
  </div>
</template>

<script>
import swiper from './subcomponents/Lunbotulist'
export default {
  data() {
    return {
      lunbotuList: []
    };
  },
  methods: {
    getlunbotu() {
      this.$axios.get("/api/getlunbo").then(result => {
        console.log(result);
        this.lunbotuList = result.data.message;
     

      });
    }
  },
  created() {
    this.getlunbotu();
  },
  components:{
    swiper
  }
};
</script>

<style scoped lang="scss">

.mui-grid-view.mui-grid-9{
  background-color: #fff;
 
}
 .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:none;
    img{
      width: 60px;
      height: 60px;
    }
    
  }

</style>
